<template>
  <svg class="logo-svg" viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- 主渐变 -->
      <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#FF6B6B" />
        <stop offset="100%" style="stop-color:#4ECDC4" />
      </linearGradient>
      <!-- 文字渐变 -->
      <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#2C3E50" />
        <stop offset="100%" style="stop-color:#3498DB" />
      </linearGradient>
      <!-- 装饰线条渐变 -->
      <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#FF6B6B" />
        <stop offset="100%" style="stop-color:#4ECDC4" />
      </linearGradient>
    </defs>
    
    <!-- 背景圆形 -->
    <circle cx="40" cy="40" r="35" 
            fill="white" 
            stroke="url(#lineGradient)" 
            stroke-width="2" />
    
    <!-- 匠字的艺术化表现 -->
    <g transform="translate(15, 15)">
      <!-- 横线 -->
      <path d="M10 25 Q25 23, 40 25" 
            stroke="url(#logoGradient)" 
            stroke-width="4" 
            fill="none" />
      <!-- 竖线 -->
      <path d="M25 10 Q25 25, 25 45" 
            stroke="url(#logoGradient)" 
            stroke-width="4" 
            fill="none" />
      <!-- 点缀 -->
      <circle cx="25" cy="25" r="2" fill="#FF6B6B" />
    </g>
    
    <!-- 文字部分 -->
    <text x="90" y="50" 
          font-family="'STXingkai', 'KaiTi', '楷体'" 
          font-size="45" 
          font-weight="bold" 
          fill="url(#textGradient)"
          style="letter-spacing: 5px;">
      匠觉
    </text>
    
    <!-- 装饰线条 -->
    <path d="M85 60 L215 60" 
          stroke="url(#lineGradient)" 
          stroke-width="2" 
          stroke-dasharray="2,2" />
  </svg>
</template>

<script>
export default {
  name: 'Logo'
}
</script>

<style scoped>
.logo-svg {
  height: 50px;
  transition: all 0.4s ease;
}

.logo-svg:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
}

@media screen and (max-width: 768px) {
  .logo-svg {
    height: 40px;
  }
}
</style> 